<template>
  <div id="SaleManOrder">
    <h1>订单列表</h1>
    <el-table :data="allOrders" border style="width: 100%">
      <el-table-column
        fixed
        prop="_id"
        label="编号"
        width="150"
      ></el-table-column>
      <el-table-column prop="usersId.name" label="客户姓名" width="120">
      </el-table-column>
      <el-table-column prop="personalId.name" label="负责销售" width="120">
      </el-table-column>
      <el-table-column prop="orderTime" label="订单时间" width="120">
      </el-table-column>
      <el-table-column prop="insuresId.name" label="保险产品" width="120">
      </el-table-column>
      <el-table-column label="订单状态">
        <template slot-scope="scope">
          <label>{{ ordersState(scope.row.orderState) }}</label>
        </template>
      </el-table-column>
      <el-table-column label="保单状态">
        <template slot-scope="scope">
          <label>{{ cancellations(scope.row.cancellation) }}</label>
        </template>
      </el-table-column>
      <el-table-column prop="insuresId.payType" label="缴费类型" width="120">
      </el-table-column>
      <el-table-column
        prop="insuresId.suitableFor"
        label="保险对象"
        width="120"
      >
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="handleClick(scope.$index, scope.row._id)"
            >修改</el-button
          >

          <el-dialog
            title="详细信息"
            :visible.sync="centerDialogVisible"
            width="30%"
            center="center"
          >
            <el-form
              ref="form"
              :model="saleOrder"
              label-width="80px"
              size="mini"
            >
              <el-form-item label="订单编号">
                <el-input type="textarea" v-model="saleOrder._id" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="订单状态">
                <el-select
                  v-model="saleOrder.orderState"
                  placeholder="状态修改"
                >
                  <el-option label="待支付" value="1"></el-option>
                  <el-option label="已支付" value="2"></el-option>
                  <el-option label="已取消" value="3"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="保单状态">
                <el-select
                  v-model="saleOrder.cancellation"
                  placeholder="状态修改"
                >
                  <el-option label="正常" value="0"></el-option>
                  <el-option label="等待管理员审核退保中" value="1"></el-option>
                  <!-- <el-option label="退保成功" value="2"></el-option>
                  <el-option label="退保失败" value="3"></el-option> -->
                  <el-option label="客户申请退保中" value="4"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item size="large">
                <el-button type="primary" @click="onSubmit">确认修改</el-button>
              </el-form-item>
            </el-form>
          </el-dialog>

          <el-button
            size="medium"
            type="danger"
            @click="handleDelete(scope.$index, scope.row._id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions, mapState } = createNamespacedHelpers("orders");
export default {
  data() {
    return {
      centerDialogVisible: false,
      center: true,
      saleOrder: {},
    };
  },
  methods: {
    ...mapActions(["getSaleManOrder", "getOneOrderById","updateOrderBySaleMan","delOrdersById"]),
    onSubmit() {
      // console.log("submit!");
      const _id =this.saleOrder._id
      const orderState= this.saleOrder.orderState;
      const cancellation =this.saleOrder.cancellation
      // console.log(_id,orderState,cancellation);
      //调用修改的方法
      this.updateOrderBySaleMan({_id,orderState,cancellation})
      this.getSaleManOrder()
    },
    ordersState(data) {
      switch (data) {
        case 1:
          return "待支付";
          break;
        case 2:
          return "已支付";
          break;
        case 3:
          return "已取消";
          break;
      }
    },
    cancellations(data) {
      switch (data) {
        case 0:
          return "正常";
          break;
        case 1:
          return "等待管理员审核退保中";
          break;
        case 2:
          return "退保成功";
          break;
        case 3:
          return "退保失败";
          break;
        case 4:
          return "客户申请退保中";
          break;
      }
    },
    handleClick(index, row) {
      this.getOneOrderById(row);
      //   this.dialogFormVisible = true;
      this.centerDialogVisible = true;
      // console.log(index, row, "ooop");
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete($index, row) {
      // console.log($index, row);
      this.delOrdersById(row);
      this.getSaleManOrder();
    },
  },
  computed: {
    ...mapState(["allOrders","orderData"]),
  },
  created(){
       this.saleOrder = this.orderData;
    // console.log(this.saleOrder, 77, this.orderData);
  },
  mounted() {
    // const isAdmins = JSON.parse(localStorage.getItem("loginUser"));
    const _id = "60378126d12900002c0042f3";
    this.getSaleManOrder(_id);
   
  },
};
</script>

<style lang="scss">
#SaleManOrder {
  * {
    margin: auto;
    padding: 5px;
  }
}
</style>